<template>
    <div class="info-collect">
        <Crumb name="Sparepart Price"></Crumb>

        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By part No"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-input
                        v-model="key1"
                        size="small"
                        class="input"
                        placeholder="Search By part Name"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                > Search
                </el-button>
                <el-button type="primary" size="small" @click="download" >Download
                EXCEL
                </el-button>
                <el-button type="text" @click="showEdit = !showEdit" class="btn">{{btnText}}</el-button>

            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="partLists.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        border
                        row-key="partsId"
                        stripe
                        @filter-change="handleFilterChange"
                        style="width: 100%">
                    <el-table-column type="expand" label="total" width="80">
                        <template slot-scope="part">
                            <div>
                                <part-detail :partDetail="part.row"></part-detail>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="partsNumber"
                            label="Part No"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="Description"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="model"
                            label="System"
                    >
                    </el-table-column>

                    <el-table-column
                            v-if="urlAvailible('part-sale-price')"
                            prop="partsPrice"
                            label="Sale Price"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.partsPrice | money}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            v-if="urlAvailible('purchase-price')"
                            prop="purchasePrice"
                            label="Purchase Price"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.purchasePrice | money}}</span>
                        </template>
                    </el-table-column>

                    <!--<el-table-column-->
                            <!--v-if="urlAvailible('change-part-price')"-->
                            <!--label="Operate"-->
                    <!--&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button type="text" icon="el-icon-edit" @click="openEdit(scope.row)">Edit</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            :filters="[
                                {
                                    text:'Has Change',
                                    value:1
                                }
                            ]"
                            column-key="record"
                            v-if="showEdit"
                            prop="showOrNot"
                            label="historyPrice"
                    >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.showOrNot === 1" type="text" @click="openHistoryPrice(scope.row)">
                                Check
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
            <div class="modal-wrapper">
                <el-dialog
                        title="Sparepart Price"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                >

                    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">

                        <el-form-item label="Sale Price" prop="salePrice">
                            <el-input v-model="ruleForm.salesPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="Purchase Price" prop="purchasePrice">
                            <el-input v-model="ruleForm.purchasePrice"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>


                <el-dialog
                        title="history price"
                        top="10"
                        :visible.sync="isShowHistoryPrice"
                        width="80%"
                >
                    <el-table
                            :data="historyPrice"
                            border
                    >
                        <el-table-column
                                prop="partsNumber"
                                label="Part No"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="description"
                                label="Description"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="contractNumber"
                                label="Contract No">
                        </el-table-column>

                        <el-table-column
                                prop="contractDate"
                                label="History Time">
                        </el-table-column>

                        <el-table-column
                                prop="partsPrice"
                                label=" Price">
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </div>
            <div class="modal-wrapper">
            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import partDetail from '../../components/part/partDetail'
    import {

        getHeliPrice,
        getHeliPriceChange
    } from "../../api";
    import { mapMutations} from 'vuex';
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {baseURL} from "../../util";

    export default {
        name: "part-price",
        mixins: [mixins, authMixins],
        data() {
            return {
                showEdit: false,
                uniSystem: [],
                uniUnit: [],
                imageList: [],
                part: [],
                ruleForm: {
                    partsId: '',
                    salesPrice: '',
                    purchasePrice: ''
                },
                rules: {},
                filterOption: [],
                partList: [],
                key: '',
                key1: '',
                dialogVisible: false,
                stock: {
                    partId: '',
                    quantity: ''
                },
                isShowHistoryPrice: false,
                historyPrice: [],
                record: [],
            }
        },
        created() {
            this.getHeliPriceList()
            this.getUniUnit();
            this.getUniSystem();
        },
        filters: {
            money(num) {
                return num && num.toString()
                    .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ','))
            }
        },
        mounted() {
            this.total = this.partLists.length
        },
        computed: {
            btnText() {
                return this.showEdit ? 'Complete' : 'Edit'
            },

            partLists: {
                get: function () {
                    let list = [];
                    list = this.partList.filter(item => {
                        return item.partsNumber.indexOf(this.key) > -1
                    }).filter(item => {
                        return (item.description && item.description.toLowerCase().indexOf(this.key1) > -1)
                    })
                    if(this.record.length) {
                        list = list.filter( item => {
                            return this.record.some(r => {
                                return item.showOrNot  === 1
                            })
                        })
                    }
                    return list
                }
            },
        },

            methods: {
                download() {
                    window.open(baseURL + '/features_for_heli/manage/export_excel_for_heli_parts.file');
                },
                async getHeliPriceList() {
                    const {status, data, msg} = await getHeliPrice();
                    if (status === ERROR_OK) {
                        this.partList = data;
                    } else {
                        this.$message.error(msg)
                    }
                },
                handleFilterChange(filter) {
                    Object.keys(filter).forEach((key) => {
                        if (key === 'record') {
                            this.record = filter[key]
                        } else {
                            this.filterOption = filter[key]
                        }
                    });
                },
                // async getUniUnit() {
                //     const {status, data} = await getUniUnit();
                //     if (status === ERROR_OK) {
                //
                //         this.uniUnit = data.map(item => {
                //             return {
                //                 text: item,
                //                 value: item
                //             }
                //         });
                //     }
                // },
                // async getUniSystem() {
                //     const {status, data} = await getUniSystem();
                //     if (status === ERROR_OK) {
                //         this.uniSystem = data.map(item => {
                //             return {
                //                 text: item,
                //                 value: item
                //             }
                //         });
                //     }
                // },

                // submitForm() {
                //     this.$refs.ruleForm.validate(async (valid) => {
                //         if (valid) {
                //             let {status} = await changePartPrice(this.ruleForm);
                //             if (status === 0) {
                //                 this.$message({
                //                     message: 'Change Price Successfully',
                //                     type: 'success'
                //                 });
                //                 this.modPartPrice(this.ruleForm);
                //                 this.clear();
                //                 this.dialogVisible = false
                //             }
                //
                //         } else {
                //             return false;
                //         }
                //     });
                // },


                clear() {
                    this.ruleForm = {
                        partsId: '',
                        purchasePrice: '',
                        salesPrice: ''
                    };

                },
                openEdit(r) {
                    this.ruleForm = {
                        partsId: r.id,
                        salesPrice: r.salesPrice,
                        purchasePrice: r.purchasePrice
                    };

                    this.dialogVisible = true

                },
                async _showHistoryPrice(partsId) {
                    let {status, data} = await getHeliPriceChange(partsId)
                    if (status === ERROR_OK) {
                        this.historyPrice = data
                    }

                },
                openHistoryPrice(r) {
                    this.isShowHistoryPrice = true
                    this._showHistoryPrice(r.partsNumber)
                },

                // async getPartDetail(id) {
                //     let {status, data} = await getPartDetail(id);
                //     if (status === ERROR_OK) {
                //         this.ruleForm = data;
                //         if (data.imageUrl) {
                //             this.imageList = data.imageUrl.map(item => {
                //                 return {
                //                     name: item,
                //                     url: item
                //                 }
                //             })
                //         } else {
                //             this.imageList = []
                //         }
                //     }
                // },
                ...mapMutations(['modPartPrice'])
            },
            watch: {
                partLists(p) {
                    this.total = p.length
                }
            },
            components: {
                Crumb, Search, partDetail
            }

    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        label {
            display: inline-block;
            line-height: 40px;
            padding: 0 20px;
            border-radius: 3px;
            cursor: pointer;
            background: #409eff;
            height: 40px;
            color: white;
            text-align: center;
            font-size: 14px;
            margin-left: 20px;
            &:hover {
                background: #6495ed;
            }
        }
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .btn {
            float: right;
            margin-right: 20px;
            transition: all 1s ease;
            opacity: 0.5;
            &:hover {
                opacity: 1;
            }
        }
    }
</style>